<template>
  <div class="footer" :style="{'margin-top':margintop1?'1px':'20px'}">
    <div class="foot_body">
      <div class="img_left" v-if="publicInfo.footLogo">
        <img :src="http + publicInfo.footLogo" alt="" />
      </div>
      <div class="foot_right">
        <div class="ft1">
          <div
            class="li_l"
            v-for="(item, index) in footList"
            :key="index"
            @click="nativeTo(item)"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="foot_p">
          主办：{{publicInfo.zhuban}} 网员服务热线：{{publicInfo.webphone}}
          传真：{{publicInfo.webkefu}}
        </div>
        <div class="foot_p">
          {{publicInfo.beianhao}}
        </div>
        <div class="foot_p">
          <img :src="require('@assets/img/beian.png')" alt="" /> {{publicInfo.beianinfo}}
        </div>
      </div>
    </div>
    <el-dialog
      title="意见反馈"
      :visible.sync="dialogVisibleFankui"
      :close-on-click-modal="false"
      width="60%">
      <el-row class="tel_row">
        <el-col :span="6" class="a_right">您的联系方式 : </el-col>
        <el-col :span="18"><el-input v-model="telFankui" placeholder="请输入您的联系方式"></el-input></el-col>
      </el-row>
      <el-row  class="tel_row">
        <el-col :span="6" class="a_right">反馈的内容 : </el-col>
        <el-col :span="18"><el-input type="textarea" v-model="textareaFankui" placeholder="请输入您反馈的内容"></el-input></el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleFankui = false">取 消</el-button>
        <el-button type="primary" @click="submitFankui">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui';
export default {
  props:["margintop1"],
  data() {
    return {
      footList: [
        { title: "关于协会", url: "/about", sel: 0  },
        { title: "会员之家", url: "/login", sel: 0 },
        { title: "合作加盟", url: "/about", sel: 2 },
        { title: "人才招聘", url: "/qiuzhi", sel: 0 },
        // { title: "免费声明", url: "/about", sel: 1 },
        { title: "意见反馈", url: "/about", sel: 1 },
        { title: "联系我们", url: "/phone", sel: 0 }
      ],
      publicInfo:{},
      http:"",
      dialogVisibleFankui:false,
      textareaFankui:"",
      telFankui:""
    };
  },
  mounted(){
    this.http = this.$apiUrl;
    this.$getApi("/common/config",{}).then(res=>{
      let resData = res.data;
      console.log(resData,"备用公用")
       this.httpp = this.$apiUrl;
      this.publicInfo = res.data
    })
  },
  methods: {
    nativeTo(item) {
      console.log(item);
      if(item.title == "意见反馈"){
        if(!this.dialogVisibleFankui){
          this.textareaFankui = "";
          this.telFankui = "";
          this.dialogVisibleFankui = true;
        }
      }else{
        this.$router.push({ path: item.url, query: { sel: item.sel,title:item.title } });
      }
    },
    submitFankui(){
      if(this.textareaFankui && this.telFankui){
        this.dialogVisibleFankui = false
        let dataL = {
          phone:this.telFankui,
          content:this.textareaFankui
        }
        this.$getApi("/common/yijianfk",dataL).then(res=>{
          this.textareaFankui = "";
          this.telFankui = "";
          Message({  
            type: "success",
            message: "你反馈的问题已提交，谢谢合作",
            showClose: true
          });
        })


        
      }else{
        Message({  
            type: "error",
            message: "请输入完整内容",
            showClose: true
        });
      }
    }
  },
};
</script>

<style scoped lang="stylus">
.tel_row{
  padding 0 0 6px;
  .a_right{
    text-align right;
    padding 8px 20px 0 0;
    font-size 16px
  }
}
.footer {
  height: 160px;
  border-top: 2px solid #1d73c8;
  width: 100%;
  background-color: #f0f0f0;
  padding-bottom: 30px;

  .foot_body {
    width: 1200px;
    height: 160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    .foot_right {
      padding-left: 30px;

      .ft1 {
        display: flex;
        justify-content: center;

        .li_l {
          color: #1d73c8;
          width: 80px;
          height: 18px;
          line-height: 18px;
          text-align: center;
          cursor: pointer;

          &+.li_l {
            border-left: 1px solid #1d73c8;
          }
        }
      }

      .foot_p {
        padding-top: 10px;
        text-align: center;
      }
    }
  }
}
</style>
